<template>
  <NConfigProvider class=""
                   v-if="!isLock"
                   :locale="zhCN"
                   :theme="getDarkTheme"
                   :theme-overrides="getThemeOverrides"
                   :date-locale="dateZhCN"
  >
    <slot></slot>
  </NConfigProvider>
</template>

<script lang="ts" setup>
import { darkTheme } from "naive-ui";
import { useRoute } from "vue-router";
import { useDesignSettingStore } from "@/store/modules/designSetting";
import { lighten } from "@/utils/index";
import { computed } from "vue";

const route = useRoute();
const designStore = useDesignSettingStore();

/**
 * @type import('naive-ui').GlobalThemeOverrides
 */
const getThemeOverrides = computed(() => {
  const appTheme = designStore.appTheme;
  const lightenStr = lighten(designStore.appTheme, 6);
  return {
    common: {
      baseColor: "#FFFFFF",
      primaryColor: lightenStr,
      primaryColorHover: lightenStr,
      primaryColorPressed: lightenStr

    },

    LoadingBar: {
      colorLoading: appTheme
    }
  };
});

const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));


</script>

<style lang="less" scoped>
@import '@/styles/index.less';

.n-config-provider {
  height: 100%;
}
</style>
